<template>
    <div id="songInfo_2">
        <div v-if="Object.keys(form).length > 0" class="container">
            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
                <div class="wrapper">
                    <!-- ==================================================================================================== -->
                    <div style="display: inline-block; " class="wrapper-left">
                        <el-form-item label="ID:">
                            <el-input class="w" v-model="form.externalId" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="歌曲名:" prop="name">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.name" @input.native="songSearch">
                                <span slot="suffix" class="iconfont icon-qita" @click="handleOtherLang"></span>
                            </el-input>
                            <!-- <el-select :clearable="true" v-model="form.name" placeholder="请选择语言" class="handle-select mr10 w">
                                <el-option
                                    v-for="(item, index) in languages"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select> -->
                        </el-form-item>

                        <el-form-item label="全拼:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinFull"></el-input>
                        </el-form-item>
                        <el-form-item label="简拼:">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.namePinyinShort"></el-input>
                        </el-form-item>

                        <el-form-item label="歌手名:" prop="actors">
                            <el-input class="w" v-model="form.actors.importName" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="专辑名:" prop="tblAlbum">
                            <el-input class="w" v-model="form.tblAlbum.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="碟:">
                            <el-input disabled></el-input>
                        </el-form-item>

                        <el-form-item label="排序:" prop="albumSeq">
                            <el-input class="w" v-model="form.albumSeq" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="CP名称:" prop="tblCppartner">
                            <el-input class="w" v-model="form.tblCppartner.name" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="ISRC:">
                            <el-input class="w" v-model="form.isrc" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="CPID:" prop="cppartnerId">
                            <el-input
                                :disabled="propsData.disabled"
                                class="w"
                                v-model="form.cppartnerId"
                                placeholder="时间戳+cpid+"
                            ></el-input>
                        </el-form-item>

                        <el-form-item label="语言:" prop="language">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.language"
                                placeholder="请选择语言"
                                class="handle-select mr10 w"
                            >
                                <el-option
                                    v-for="(item, index) in languages"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="风格:" prop="genre">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="false"
                                multiple
                                v-model="form.genre"
                                placeholder="请选择风格"
                                class="handle-select mr10 w"
                            >
                                <el-option
                                    v-for="(item, index) in genres_3"
                                    :key="index"
                                    :label="item.label"
                                    :value="item.value"
                                ></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="授权场景：">
                            <el-select
                                :disabled="propsData.disabled"
                                multiple
                                v-model="form.licensingScenarios"
                                class="handle-select mr10 w"
                                clearable
                            >
                                <el-option key="0" label="通用" value="通用"></el-option>
                                <el-option key="1" label="流媒体" value="流媒体"></el-option>
                                <el-option key="2" label="K歌" value="K歌"></el-option>
                                <el-option key="3" label="直播" value="直播"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="渠道管理:">
                            <el-input class="w" :disabled="propsData.disabled" v-model="form.channel"></el-input>
                        </el-form-item>

                        <el-form-item label="品牌名称:">
                            <el-input class="w" :disabled="propsData.disabled" v-model="form.brands"></el-input>
                        </el-form-item>

                        <el-form-item label="终端类型：">
                            <el-select multiple v-model="form.terminalType" class="handle-select mr10 w" :disabled="propsData.disabled">
                                <el-option key="0" label="pc电脑" value="0"></el-option>
                                <el-option key="1" label="平板电脑" value="1"></el-option>
                                <el-option key="2" label="手机" value="2"></el-option>
                                <el-option key="3" label="电视" value="3"></el-option>
                            </el-select>
                        </el-form-item>

                        <!-- v-model="form.bandId" -->
                        <el-form-item label="绑定id:">
                            <el-input
                                :readonly="true"
                                v-model="form.bandId"
                                :disabled="propsData.disabled || !form.bindFlag"
                                class="w"
                                @keyup.native.enter="handleBindId(form.bindFlag)"
                            >
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-search"
                                    :style="{ 'font-size': '18px', cursor: 'pointer' }"
                                    @click="handleBindId(form.bindFlag)"
                                ></i>
                            </el-input>
                        </el-form-item>
                    </div>
                    <!-- ==================================================================================================== -->
                    <div style="display: inline-block; " class="wrapper-right">
                        <el-form-item label="接入名称：">
                            <el-input class="w" :disabled="propsData.disabled" v-model="form.importName"></el-input>
                        </el-form-item>

                        <el-form-item label="歌曲别名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.aliasName"></el-input>
                        </el-form-item>

                        <el-form-item label="子别名：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.subtitle"></el-input>
                        </el-form-item>

                        <el-form-item label="词作者：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.lyricWriter"></el-input>
                        </el-form-item>

                        <el-form-item label="曲作者：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.composer"></el-input>
                        </el-form-item>

                        <el-form-item label="插曲类型：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.episodeType"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="无" :value="0"></el-option>
                                <el-option key="1" label="配乐" :value="364"></el-option>
                                <el-option key="2" label="片尾曲" :value="365"></el-option>
                                <el-option key="3" label="插曲" :value="366"></el-option>
                                <el-option key="4" label="主题曲" :value="363"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否有伴奏：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.accompanyFlag"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="是否精品：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.excellentFlag"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="否" :value="false"></el-option>
                                <el-option key="1" label="是" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="热度：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.grade"></el-input>
                        </el-form-item>

                        <el-form-item label="发行单位：">
                            <el-input class="w" v-model="form.releaseUnit" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="发行日期：" prop="releaseDate">
                            <div class="block w">
                                <el-date-picker
                                    :disabled="propsData.disabled"
                                    class="w"
                                    v-model="form.releaseDate"
                                    type="date"
                                    placeholder="选择日期"
                                >
                                </el-date-picker>
                            </div>
                        </el-form-item>

                        <el-form-item label="敏感信息：" prop="">
                            <el-input class="w" disabled></el-input>
                        </el-form-item>

                        <el-form-item label="安全类别：">
                            <el-select
                                :disabled="propsData.disabled"
                                :clearable="true"
                                v-model="form.blackFlag"
                                class="handle-select mr10 w"
                            >
                                <el-option key="0" label="白名单" :value="false"></el-option>
                                <el-option key="1" label="黑名单" :value="true"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="状态：">
                            <el-select :disabled="propsData.disabled" :clearable="true" v-model="form.status" class="handle-select mr10 w">
                                <el-option key="0" label="下线" :value="0"></el-option>
                                <el-option key="1" label="在线" :value="1"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="试听开始(秒)：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.auditionStart"></el-input>
                        </el-form-item>

                        <el-form-item label="试听结束(秒)：">
                            <el-input :disabled="propsData.disabled" class="w" v-model="form.auditionEnd"></el-input>
                        </el-form-item>

                        <el-form-item label="关联MV">
                            <el-input :disabled="propsData.disabled" class="w" @keyup.native.enter="handleMvToast">
                                <i
                                    slot="suffix"
                                    class="el-input__icon el-icon-search"
                                    :style="{ 'font-size': '18px', cursor: 'pointer' }"
                                    @click="handleMvToast"
                                ></i>
                            </el-input>
                            <!-- <div style="overflow: auto; height: 164px; margin-top: 10px;"> -->
                            <!-- <p
                                    v-if="form.relaResultForms && form.relaResultForms.length > 0"
                                    style="height: 32px; display: flex; justify-content: space-between; padding-right: 10px; margin-bottom: 1px; font-size: 12px;"
                                    v-for="(item, index) in form.relaResultForms"
                                    :key="index"
                                >
                                    <span style=" background: rgba(0,0,0,.1);flex: 3; text-align: left;">{{ item.songId }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 4; text-align: center; margin: 0 10px 0">{{
                                        item.songName
                                    }}</span>
                                    <span style=" background: rgba(0,0,0,.1); flex: 3; text-align: right;">{{ item.relaType }}</span>
                                </p> -->

                            <div class="limiter" v-if="form.relaResultForms && form.relaResultForms.length > 0">
                                <div class="container-table">
                                    <div class="wrap-table">
                                        <div class="data-table ver1 m-b-110">
                                            <div class="table-head">
                                                <table>
                                                    <thead>
                                                        <tr class="row head">
                                                            <th class="cell column1">ID</th>
                                                            <th class="cell column2">歌曲名</th>
                                                            <th class="cell column3">匹配类型</th>
                                                        </tr>
                                                    </thead>
                                                </table>
                                            </div>

                                            <div class="table-body">
                                                <table>
                                                    <tbody>
                                                        <tr v-for="(item, index) in form.relaResultForms" :key="index" class="row body">
                                                            <td class="cell column1">{{ item.songId }}</td>
                                                            <td class="cell column2">{{ item.songName }}</td>
                                                            <td class="cell column3">{{ item.relaType }}</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- </div> -->
                        </el-form-item>
                    </div>

                    <!-- ==================================================================================================== -->
                </div>
            </el-form>
            <!-- 表格部分 -->
            <div class="table">
                <!-- 付费模式 -->
                <!-- ====================左边================== -->
                <div class="left">
                    <el-table
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="form.tblSongAuthTerritories"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column
                            prop="territoryCode"
                            label="授权区域"
                            align="center"
                            :show-overflow-tooltip="true"
                        ></el-table-column>

                        <el-table-column
                            prop="commercialModelType"
                            label="付费模式"
                            align="center"
                            :show-overflow-tooltip="true"
                        ></el-table-column>

                        <el-table-column prop="priceType" label="价格" align="center" :show-overflow-tooltip="true"></el-table-column>

                        <el-table-column
                            prop="startDateTime"
                            label="授权起始日期"
                            align="center"
                            :show-overflow-tooltip="true"
                        ></el-table-column>

                        <el-table-column
                            prop="endDateTime"
                            label="授权截止日期"
                            align="center"
                            :show-overflow-tooltip="true"
                        ></el-table-column>
                    </el-table>
                </div>

                <!-- 表格 -->
                <!-- ====================右边================== -->
                <div class="right">
                    <el-table
                        :cell-style="{ color: '#666', 'font-size': '14px' }"
                        :data="tableData_1"
                        border
                        resizable
                        ref="multipleTable"
                        :header-cell-style="rowClass"
                        header-cell-class-name="table-header"
                    >
                        <el-table-column prop="type" label="类型" align="left" :show-overflow-tooltip="true"></el-table-column>

                        <el-table-column prop="describe" label="描述" align="center"></el-table-column>

                        <el-table-column label="备注" align="center">
                            <template slot-scope="scope">
                                <el-input
                                    placeholder=""
                                    style="height:100%; width: 100%;"
                                    v-if="scope.row.type === 'LRC-LRC'"
                                    v-model="form.remark"
                                    type="text"
                                    disabled
                                ></el-input>
                                <!-- <el-button size="mini" type="info" @click="handleImport">导入Excel</el-button> -->
                                <!-- <a href="javascript:void(0)" class="btn">
                                        导入excel
                                        <input
                                            type="file"
                                            accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
                                            id="file"
                                            name="file"
                                            @change="handleImport($event, scope.row.id)"
                                        />
                                    </a> -->
                            </template>
                        </el-table-column>

                        <el-table-column label="预览" prop="preview" align="center">
                            <template slot-scope="scope">
                                <a
                                    @click="handleClick($event, scope.row)"
                                    style="color:black; display: inline-block;cursor:pointer;font-size: 14px;"
                                >
                                    <svg-icon v-if="scope.row.preview == 0" data_iconName="u1048" className="u1048_icon" />

                                    <svg-icon v-if="scope.row.preview == 1 && form.m3u8Path" data_iconName="播放" className="play_icon" />
                                    <!-- 自定义 3 为暂停状态 -->
                                    <svg-icon v-if="scope.row.preview == 3 && form.m3u8Path" data_iconName="暂停" className="pause_icon" />

                                    <!-- <svg-icon v-if="scope.row.preview == 2" data_iconName="u1049" className="u1049_icon" /> -->
                                </a>
                            </template>
                        </el-table-column>

                        <el-table-column label="操作" width="180" align="center">
                            <template slot-scope="scope">
                                <a v-if="propsData.btn" href="javascript:void(0)" class="btn">
                                    上传文件
                                    <input
                                        type="file"
                                        :accept="accept"
                                        @click="handleClick_r($event, scope.row)"
                                        id="file"
                                        name="file"
                                        @change="uploadFile($event, scope.row)"
                                        ref="target"
                                    />
                                </a>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <!-- //表格部分 -->

            <el-row>
                <el-button v-if="propsData.btn" @click="handleCancel">取消</el-button>
                <el-button
                    v-if="propsData.btn"
                    type="primary"
                    :disabled="
                        legals.includes(true) ||
                            checkRequire({
                                name: form.name,
                                // actors: form.actors,
                                // tblAlbum: form.tblAlbum
                                albumSeq: form.albumSeq,
                                // tblCppartner: form.tblCppartner,
                                language: form.language,
                                genre: form.genre,
                                releaseDate: form.releaseDate + ''
                            })
                    "
                    @click="handleSave"
                    >保存</el-button
                >
            </el-row>
        </div>
        <!-- <audio
            v-if="Object.keys(form).length > 0"
            ref="audio"
            :src="`${baseUrl}/api/stream/audio?path=${Object.keys(form.tblSongfiles).length > 0 ? form.tblSongfiles.filePath : ''}`"
        ></audio> -->

        <audio ref="audio_1"></audio>
        <!-- 其他国家语言弹出框 -->
        <el-dialog :close-on-click-modal="false" title="其他名称" :visible.sync="otherLangVisible" width="50%">
            <div class="limiter" v-if="form.tblSongLangs && form.tblSongLangs.length > 0">
                <div class="container-table">
                    <div class="wrap-table">
                        <div class="data-table ver1 m-b-110">
                            <div class="table-head">
                                <table>
                                    <thead>
                                        <tr class="row head">
                                            <th class="cell column1" :style="{ width: '40%' }">地区</th>
                                            <th class="cell column2" :style="{ width: 'auto' }">名称</th>
                                            <!-- <th class="cell column3">匹配类型</th> -->
                                        </tr>
                                    </thead>
                                </table>
                            </div>

                            <div class="table-body">
                                <table>
                                    <tbody>
                                        <tr v-for="(item, index) in form.tblSongLangs" :key="index" class="row body">
                                            <td class="cell column1" :style="{ width: '40%' }">{{ getCountryName(item.language) }}</td>
                                            <td class="cell column2" :style="{ width: 'auto' }">{{ item.importName }}</td>
                                            <!-- <td class="cell column3">{{ item.relaType }}</td> -->
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
        <!-- 关联MV弹出框 -->
        <el-dialog :close-on-click-modal="false" title="关联MV" :visible.sync="mvVisible" width="50%">
            <div class="container">
                <div class="handle-box">
                    <el-input
                        @keyup.native.enter="handleSearch"
                        v-model="query.ids"
                        placeholder="歌曲ID"
                        class="mr10"
                        style="width: 120px;"
                        clearable
                        @clear="handleSearch"
                    ></el-input>

                    <el-input
                        @keyup.native.enter="handleSearch"
                        v-model="query.importName"
                        placeholder="歌曲名"
                        class="mr10"
                        style="width: 120px;"
                        clearable
                        @clear="handleSearch"
                    ></el-input>

                    <el-input
                        @keyup.native.enter="handleSearch"
                        v-model="query.actorImportName"
                        placeholder="歌手名"
                        class="mr10"
                        style="width: 120px;"
                        clearable
                        @clear="handleSearch"
                    ></el-input>

                    <el-input
                        @keyup.native.enter="handleSearch"
                        v-model="query.albumImportName"
                        placeholder="专辑名"
                        class="mr10"
                        style="width: 120px;"
                        clearable
                        @clear="handleSearch"
                    ></el-input>
                    <el-button type="primary" @click="handleSearch">搜索</el-button>
                </div>
                <el-table
                    v-if="tableData_2.length > 0"
                    :data="tableData_2"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column label="ID" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column label="歌曲名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.importName }}</template>
                    </el-table-column>

                    <el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.actors.name }}</template>
                    </el-table-column>

                    <el-table-column label="匹配类型" align="center">
                        <template slot-scope="scope">
                            <el-select placeholder="匹配类型" clearable v-model="scope.row.relaResultForms">
                                <el-option key="1" label="HasArtistFromEnsemble" value="1"></el-option>
                                <el-option key="2" label="HasArtistFromSameEnsemble" value="2"></el-option>
                                <el-option key="3" label="HasEnsembleWithArtist" value="3"></el-option>
                                <el-option key="4" label="HasSameArtist" value="4"></el-option>
                                <el-option key="5" label="HasSameRecordingProject" value="5"></el-option>
                                <el-option key="6" label="HasSimilarContent" value="6"></el-option>
                                <el-option key="7" label="IsEquivalentToAudio" value="7"></el-option>
                                <el-option key="8" label="IsEquivalentToVideo" value="8"></el-option>
                                <el-option key="9" label="IsExtendedFromAlbum" value="9"></el-option>
                                <el-option key="10" label="IsFromAudio" value="10"></el-option>
                                <el-option key="11" label="IsFromVideo" value="11"></el-option>
                                <el-option key="12" label="IsParentRelease" value="12"></el-option>
                                <el-option key="13" label="IsReleaseFromRelease" value="13"></el-option>
                                <el-option key="14" label="IsShortenedFromAlbum" value="14"></el-option>
                            </el-select>
                        </template>
                    </el-table-column>

                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                v-if="!getAllSongID(form.relaResultForms, 'songId').includes(scope.row.id)"
                                :disabled="scope.row.relaResultForms === ''"
                                @click="handleAdd(scope.$index, scope.row)"
                                >添加</el-button
                            >

                            <el-button
                                type="danger"
                                v-if="getAllSongID(form.relaResultForms, 'songId').includes(scope.row.id)"
                                @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>

                <div class="pagination">
                    <el-pagination
                        background
                        layout="total,sizes, prev, pager, next, jumper"
                        :page-sizes="[5, 10, 20, 30]"
                        @size-change="handleSizeChange"
                        :current-page="query.pageIndex"
                        :page-size="query.pageSize"
                        :total="pageTotal"
                        @current-change="handlePageChange"
                    ></el-pagination>
                </div>
            </div>
        </el-dialog>

        <!-- 绑定Id弹出框 -->
        <el-dialog :close-on-click-modal="false" title="绑定Id" :visible.sync="bindIdVisible" width="50%">
            <div class="container">
                <div class="handle-box">
                    <el-input
                        @keyup.native.enter="handleSearchBindId"
                        v-model="query_3.ids"
                        placeholder="歌曲ID"
                        class="mr10"
                        style="width: 120px;"
                        clearable
                    ></el-input>

                    <el-button type="primary" :disabled="disabled" @click="handleSearchBindId">搜索</el-button>
                </div>
                <el-table
                    v-if="tableData_3.length > 0"
                    :data="tableData_3"
                    border
                    ref="multipleTable"
                    header-cell-class-name="table-header"
                >
                    <el-table-column label="ID" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>

                    <el-table-column label="歌曲名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.importName }}</template>
                    </el-table-column>

                    <el-table-column label="歌手名" align="center" :show-overflow-tooltip="true">
                        <template slot-scope="scope">{{ scope.row.actors.name }}</template>
                    </el-table-column>

                    <el-table-column label="操作" width="180" align="center">
                        <template slot-scope="scope">
                            <el-button
                                type="primary"
                                :disabled="scope.row.relaResultForms === ''"
                                @click="handleBindIdAdd(scope.$index, scope.row)"
                                >添加</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { genres_3 } from '@/components/common/';
import { languages } from '@/components/common/';
import { mapGetters, mapMutations, mapActions } from 'vuex';
import { v4 as uuidv4 } from 'uuid';
import { debounce, throttle } from '@/utils/utils.js';
import { Base64 } from 'js-base64';
import Hls from 'hls.js';
// import Lyric from 'lyric-parser';
import Lyric from '@/components/common/js/Lyric.js';
import NProgress from 'nprogress';
import axios from 'axios';
export default {
    props: {
        propsData: {
            type: Object,
            default: function() {
                return {
                    btn: true,
                    disabled: false
                };
            }
        }
    },
    activated() {
        // if (this.$route.query.id) {
        //     this.form = {};
        //     this.getDataById(this.$route.query.id);
        // }
    },
    watch: {
        $route: {
            immediate: true,
            deep: true,
            handler: function(a, b) {
                if (a.name === 'SongInfo') {
                    if (Object.keys(this.form).length === 0) {
                        this.getDataById(this.$route.query.id);
                    }
                }
            }
        },
        '$route.query'(a, b) {
            console.log(a, b);
            // if (a.id && b.id && a.id != b.id) {
            //     this.getDataById(this.$route.query.id);
            // }
        },
        '$route.path'(a, b) {
            console.log(a, b);
            if (a != '/song/info') {
                this.tableData_1[this.tableData_1.length - 1].preview = 1;
            }
        }
    },

    computed: {
        ...mapGetters({
            tagsList: 'tagsList',
            form: 'qukuSongForm'
        })
    },
    methods: {
        getCountryName(lang) {
            let languages = this.languages;
            for (let i = 0, len = languages.length; i < len; i++) {
                if (lang === languages[i].value) {
                    return languages[i].label;
                }
            }
        },
        handleOtherLang() {
            this.otherLangVisible = true;
        },
        handleDelete(index, row) {
            console.log(index, row);
            var index = this.form.relaResultForms.findIndex(item => {
                return row.id === item.songId;
            });
            console.log(index);
            this.form.relaResultForms.splice(index, 1);
        },
        handleAdd(index, row) {
            this.form.relaResultForms.unshift({
                relaType:
                    row.relaResultForms == 1
                        ? 'HasArtistFromEnsemble'
                        : row.relaResultForms == 2
                        ? 'HasArtistFromSameEnsemble'
                        : row.relaResultForms == 3
                        ? 'HasEnsembleWithArtist'
                        : row.relaResultForms == 4
                        ? 'HasSameArtist'
                        : row.relaResultForms == 5
                        ? 'HasSameRecordingProject'
                        : row.relaResultForms == 6
                        ? 'HasSimilarContent'
                        : row.relaResultForms == 7
                        ? 'IsEquivalentToAudio'
                        : row.relaResultForms == 8
                        ? 'IsEquivalentToVideo'
                        : row.relaResultForms == 9
                        ? 'IsExtendedFromAlbum'
                        : row.relaResultForms == 10
                        ? 'IsFromAudio'
                        : row.relaResultForms == 11
                        ? 'IsFromVideo'
                        : row.relaResultForms == 12
                        ? 'IsParentRelease'
                        : row.relaResultForms == 13
                        ? 'IsReleaseFromRelease'
                        : row.relaResultForms == 14
                        ? 'IsShortenedFromAlbum'
                        : '',
                songId: row.id,
                songName: row.importName
            });
        },
        getAllSongID(array = [], id = 'songId') {
            if (array.length > 0) {
                return array.map(item => {
                    return item[id];
                });
            } else {
                return [];
            }
        },
        handleSearch: debounce(function() {
            this.$set(this.query, 'pageIndex', 1);
            this.getData();
        }, 300),
        // 分页导航
        handlePageChange(val) {
            this.$set(this.query, 'pageIndex', val);
            this.getData();
        },
        handleSizeChange(val) {
            this.$set(this.query, 'pageSize', val);
            this.getData();
        },
        saveEdit() {
            this.mvVisible = false;
        },
        cancelQuest() {
            if (typeof this.source === 'function') {
                this.source('终止请求');
            }
        },
        // 绑定Id
        async getBindIdData() {
            try {
                const _this = this;
                this.cancelQuest();
                NProgress.start();
                this.disabled = true;
                const url = '/song/list';
                const { data: res } = await this.$http[0].get(url, {
                    cancelToken: new axios.CancelToken(function executor(c) {
                        _this.source = c;
                    }),
                    params: this.$removeField({
                        page: this.query_3.pageIndex,
                        size: this.query_3.pageSize,
                        ids: this.query_3.ids.trim(),
                        mediaType: 'audio'
                    })
                });

                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                // this.aOption = [];
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        // this.aOption.push({
                        //     type: 'application/x-mpegURL', //媒体类型，m3u8请给application/x-mpegURL或者application/vnd.apple.mpegURL，其他的会默认为普通音视频，注：微信不支持m3u8
                        //     src: item.m3u8Path, //音频地址
                        //     preload: true, //是否预下载，默认为true
                        //     autoplay: false, //是否自动播放（兼容性不太好），默认为false
                        //     isLoop: false //是否循环，默认不循环
                        //     // controls: 'progress,current,durration' //显示的控件,没有配置controls项则全部显示。
                        // });
                        // item.paused = true;
                        // if (item.tblSongfiles && item.tblSongfiles.length > 0) {
                        //     item.tblSongfiles[0].filePath = `${process.env.VUE_APP_SRC1}/api/stream/audio?path=${item.tblSongfiles[0].filePath}`;
                        // } else {
                        //     item.tblSongfiles = [
                        //         {
                        //             filePath: ''
                        //         }
                        //     ];
                        // }
                        if (item.actors && item.actors.length != 0) {
                            item.actors.name = '';
                            item.actors.map(val => {
                                item.actors.name += val.name + '/';
                            });
                            item.actors.name = item.actors.name.slice(0, -1);
                        } else {
                            item.actors = [];
                            item.actors.name = '';
                        }

                        // if (item.tblSongAuthTerritories && item.tblSongAuthTerritories.length > 0) {
                        //     item.tblSongAuthTerritories.priceType = '';
                        //     item.tblSongAuthTerritories.map(v => {
                        //         if (v.priceType + '' != 'undefined') {
                        //             item.tblSongAuthTerritories.priceType += v.priceType + '/';
                        //         }
                        //     });
                        //     item.tblSongAuthTerritories.priceType = item.tblSongAuthTerritories.priceType.slice(0, -1);
                        // } else {
                        //     item.tblSongAuthTerritories = [];
                        //     item.tblSongAuthTerritories.priceType = '';
                        // }

                        // item.createTime = this.$dateFormat(item.createTime, '', '-');
                        // item.updateTime = this.$dateFormat(item.updateTime, '', '-');
                    });
                    // this.SET_QUKUSONG_DATA(res.data.content);
                    // this.SET_QUKUSONG_PAGETOTAL(res.data.totalElements || 0);
                    // var tempQuery = { ...this.query };
                    // this.$set(tempQuery, 'show', false);
                    // this.SET_QUKUSONG_QUERY(tempQuery);
                    // this.setPlayList(res.data.content);

                    this.tableData_3 = res.data.content;
                    // this.pageTotal_3 = res.data.totalElements;
                } else {
                    // this.SET_QUKUSONG_DATA([]);
                    // this.SET_QUKUSONG_PAGETOTAL(0);
                    // var tempQuery = { ...this.query };
                    // this.$set(tempQuery, 'show', false);
                    // this.SET_QUKUSONG_QUERY(tempQuery);
                    // this.setPlayList([]);
                    this.tableData_3 = [];
                    // this.pageTotal_3 = 0;
                }

                NProgress.done();
                this.disabled = false;
            } catch (err) {
                this.tableData_3 = [];
                // this.pageTotal_3 = 0;
                // this.SET_QUKUSONG_DATA([]);
                // this.SET_QUKUSONG_PAGETOTAL(0);
                // var tempQuery = { ...this.query };
                // this.$set(tempQuery, 'show', false);
                // this.SET_QUKUSONG_QUERY(tempQuery);
                // this.setPlayList([]);
                console.dir(err);
                NProgress.done();
                this.disabled = false;
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        handleSearchBindId() {
            this.getBindIdData();
        },
        handleBindIdAdd(index, row) {
            this.$confirm('确认绑定吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$handleUnlock.call(this, this.save, '/song/unlock', this.form.id);
                    this.bind(row);
                })
                .catch(() => {});
        },
        async bind(row) {
            try {
                let url = '/song/bind';
                let { data: res } = await this.$http[0].get(url, {
                    params: {
                        songId: this.$route.query.id,
                        bindId: row.id
                    }
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                // this.form.bandId = row.id;
                this.SET_QUKUSONG_FORM({ ...this.form, bandId: row.id });
                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.bindIdVisible = false;
            } catch (err) {
                console.dir(err);
            }
        },
        handleBindId(bindFlag) {
            if (bindFlag === false) {
                return;
            }
            this.bindIdVisible = true;
        },
        handleMvToast() {
            console.log(111);

            this.mvVisible = true;
            if (this.tableData_2.length === 0) {
                this.getData();
            }
        },
        async getData() {
            try {
                let url = '/song/list';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        page: this.query.pageIndex,
                        size: this.query.pageSize,
                        ids: this.query.ids.trim(),
                        albumImportName: this.query.albumImportName.trim(),
                        importName: this.query.importName.trim(),
                        actorImportName: this.query.actorImportName.trim(),
                        mediaType: 'video'
                    })
                });
                console.log(res);
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                if (res.data.content && res.data.content.length > 0) {
                    res.data.content.map(item => {
                        item.relaResultForms = '';
                        if (item.actors && item.actors.length != 0) {
                            item.actors.name = '';
                            item.actors.map(val => {
                                item.actors.name += val.name + '/';
                            });
                            item.actors.name = item.actors.name.slice(0, -1);
                        } else {
                            item.actors = [];
                            item.actors.name = '';
                        }
                    });
                    this.pageTotal = res.data.totalElements;
                    this.tableData_2 = res.data.content;
                } else {
                    this.pageTotal = 0;
                    this.tableData_2 = [];
                }
            } catch (err) {
                this.pageTotal = 0;
                this.tableData_2 = [];
                console.dir(err);
            }
        },
        songSearch: debounce(function({ target: { value } }) {
            if (!value) {
                // 不输入关键词时恢复为原来的文本
                // this.form.name = '';
                return;
            }
            setTimeout(() => {
                console.log('发送请求！');
                // this.getTextTest(value, 0);
                this.$getTextTest.call(this, value, 0);
            }, 500);
        }, 300),
        // async getTextTest(text, n) {
        //     try {
        //         let url = '/garbage/textTesting';
        //         let { data: res } = await this.$http[0].post(
        //             url,
        //             this.$objTostring({
        //                 text
        //             }),
        //             {
        //                 headers: {
        //                     'Content-Type': 'application/x-www-form-urlencoded'
        //                 }
        //             }
        //         );
        //         console.log(res);
        //         if (res.code != '0000') {
        //             throw new Error(res.message);
        //         }
        //         if (res.data[0].suggestion == 'pass') {
        //             this.legals[n] = false;
        //             this.legals = [...this.legals];
        //         } else {
        //             throw new Error(res.data[0].testStatus);
        //         }
        //     } catch (err) {
        //         console.dir(err);
        //         this.$message.error({
        //             message: err.message,
        //             duration: 1500
        //         });
        //     }
        // },

        checkRequire(obj) {
            return this.$isEmpty(obj);
        },
        handleClick_r(e, row) {
            console.log(e, row);
            console.log(111);
            if (row.type == 'FLAC-1000K-FTD') {
                this.accept = 'audio/mp3,audio/ogg,audio/mpeg,video/ogg';
            } else {
                this.accept = '.lrc';
            }
        },
        ...mapActions(['setSongInfoData_']),
        ...mapMutations({
            SET_TAGSLIST: 'SET_TAGSLIST',
            SET_QUKUSONG_DATA: 'SET_QUKUSONG_DATA',
            SET_QUKUSONG_FORM: 'SET_QUKUSONG_FORM'
        }),

        // 获取歌曲信息
        async getDataById(sid) {
            try {
                let url = '/song/detail';
                let { data: res } = await this.$http[0].get(url, {
                    params: this.$removeField({
                        id: sid,
                        indexFlag: localStorage.getItem('indexFlag_song') ? localStorage.getItem('indexFlag_song') : null
                    })
                });
                if (res.code != '0000') {
                    throw new Error(res.message);
                }
                console.log('歌曲信息', res);
                // 解构
                let requiredFields = {
                    id: '',
                    name: '',
                    namePinyinFull: '',
                    namePinyinShort: '',
                    actors: [],
                    tblAlbum: { name: '' },
                    albumSeq: '',
                    tblCppartner: { name: '' },
                    cppartnerId: '',
                    language: '',
                    genre: '',
                    externalId: '',
                    price: '',
                    blackFlag: '',
                    channel: '',
                    aliasName: '',
                    subtitle: '',
                    lyricWriter: '',
                    composer: '',
                    episodeType: '',
                    accompanyFlag: '',
                    excellentFlag: '',
                    grade: '',
                    releaseUnit: '',
                    releaseDate: '',
                    status: '',
                    albumPicture: {},
                    tblLyrics: [],
                    tblSongAuthTerritories: [],
                    tblSongfiles: {},
                    payModeStartEndDate: [],
                    isrc: '',
                    importName: '',
                    tblListenDownloadModes: [],
                    afterTblLyrics: '',
                    remark: '',
                    relaResultForms: [],
                    tblSongLangs: [],
                    m3u8Path: '',
                    bindFlag: '',
                    bandId: ''
                };
                var ret = this.$chooseFields(res.data, Object.keys(requiredFields), {}, requiredFields);

                // 中间处理
                // id = this.$getNumber(id);

                if (ret.actors.length > 0) {
                    ret.actors.importName = '';
                    if (ret.actors && ret.actors.length !== 0) {
                        ret.actors.map(item => {
                            ret.actors.importName += item.importName + '/';
                        });
                    }
                    ret.actors.importName = ret.actors.importName.slice(0, -1);
                } else {
                    ret.actors[0] = { importName: '' };
                }
                ret.releaseDate = this.$timstampToStandardDate(ret.releaseDate);

                ret.genre = ret.genre ? [...new Set(ret.genre.split(','))] : [];

                if (ret.tblSongAuthTerritories.length > 0) {
                    for (var item of ret.tblSongAuthTerritories) {
                        item.startDateTime = this.$dateFormat(item.startDateTime, '', '-');
                        item.endDateTime = this.$dateFormat(item.endDateTime, '', '-');
                    }
                }

                if (ret.tblLyrics.length > 0) {
                    var lyricArr = this.formatLyric(ret.tblLyrics[0].content);
                    this.lyricString = '';
                    var str = '';
                    var textarea = document.createElement('textarea');
                    for (var i = 0; i < lyricArr.length; i++) {
                        // var p = document.createElement('p');
                        // 方式1
                        // p.innerText =  lyricArr[i];
                        // 方式2
                        // p.innerHTML = `<input class='lyric-content' style='outline: none; width: 100%; height: 24px; border: none;' value='${lyricArr[i]}' />`;
                        // p.innerHTML = `<input class='lyric-content' style='outline: none; width: 100%; height: 24px; border: none;' value='${lyricArr[i]}' />`;
                        // p.style.cssText = 'margin:0; padding:0; text-align: left;';
                        // console.log(this.domToString(p));
                        // this.lyricString += this.domToString(p);
                        // 方式3
                        str += lyricArr[i] + '\r\n';
                    }
                    textarea.classList.add('lyric-content');
                    textarea.rows = lyricArr.length;
                    textarea.style.cssText = `width: 100%; height: 100%; outline: none; border: none; color: #333;`;
                    textarea.innerHTML = str;
                    this.lyricString = this.domToString(textarea);
                } else {
                    this.lyricString = '';
                }
                // if (ret.afterTblLyrics) {
                //     var lyricArr = this.formatLyric(ret.afterTblLyrics);
                //     this.lyricString = '';
                //     for (var i = 0; i < lyricArr.length; i++) {
                // this.lyricString += `<p style='margin:0; padding:0; text-align: left;'>${lyricArr[i]}</p>`;
                //     }
                // }

                // payModeStartEndDate = payModeStartEndDate || [];

                var auditionEnd = '',
                    auditionStart = '';
                if (ret.tblListenDownloadModes.length > 0) {
                    var auditionStart = ret.tblListenDownloadModes[0].listenSegmentOffset;
                    var auditionEnd = ret.tblListenDownloadModes[0].listenSegmentSecond + ret.tblListenDownloadModes[0].listenSegmentOffset;
                }
                // 赋值
                // this.form = {
                //     id,
                //     name,
                //     namePinyinFull,
                //     namePinyinShort,
                //     actors,
                //     tblAlbum,
                //     albumSeq,
                //     tblCppartner,
                //     cppartnerId,
                //     language,
                //     genre,
                //     externalId,
                //     price,
                //     blackFlag,
                //     channel,
                //     aliasName,
                //     subtitle,
                //     lyricWriter,
                //     composer,
                //     episodeType,
                //     accompanyFlag,
                //     excellentFlag,
                //     grade,
                //     releaseUnit,
                //     releaseDate,
                //     status,
                //     albumPicture,
                //     tblLyrics,
                //     tblSongAuthTerritories,
                //     tblSongfiles,
                //     payModeStartEndDate,
                //     isrc,
                //     importName,
                //     tblListenDownloadModes,
                //     auditionStart,
                //     auditionEnd
                // };

                ret.tblAlbum.genre = [ret.tblAlbum.genre];
                // 歌曲信息和专辑信息歌手名不一样
                ret.tblAlbum.tblActors = ret.tblAlbum.tblActors ? ret.tblAlbum.tblActors : [{ name: '' }];

                this.setSongInfoData_(ret.tblAlbum);
                // this.setTag();

                this.$setActiveTag.call(this, ret.name);
                // this.form = { ...ret, auditionStart, auditionEnd };
                this.SET_QUKUSONG_FORM({ ...ret, auditionStart, auditionEnd });

                // this.form.tblAlbum.tblActors = this.form.importName || [
                //     {
                //         name: ''
                //     }
                // ];
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },

        // formatLyric(lyric) {
        //     this.lyric = Base64.decode(lyric);
        //     console.log(this.lyric);
        //     this.currentLyric = new Lyric(this.lyric, this.handleLyric);
        //     console.log(this.currentLyric);
        // },
        // setTag() {},
        rowClass({ row, rowIndex }) {
            return 'height: 26px;background-color:#409EFF !important;color:#fff; text-align: center;';
        },

        s_to_hs(s) {
            //计算分钟
            //算法：将秒数除以60，然后下舍入，既得到分钟数
            var h;
            h = Math.floor(s / 60);
            //计算秒
            //算法：取得秒%60的余数，既得到秒数
            s = s % 60;
            //将变量转换为字符串
            h += '';
            s += '';
            //如果只有一位数，前面增加一个0
            h = h.length == 1 ? '0' + h : h;
            s = s.length == 1 ? '0' + s : s;
            return h + ':' + s;
        },
        handleClick(e, row) {
            console.log(e, row);

            if (row.type == 'FLAC-1000K-FTD') {
                // 播放音乐
                this.togglePlaying(e, row);
            } else {
                this.open();
            }
        },
        open() {
            // this.$alert(`<div style='overflow : auto;  height: 500px; margin-top: 5px;'>` + this.lyricString + `</div>`, '歌词预览', {
            //     confirmButtonText: '完成',
            //     dangerouslyUseHTMLString: true,
            //     callback: action => {
            //         // this.$message({
            //         //     type: 'info',
            //         //     message: `action: ${action}`
            //         // });
            //         // 字符串生成文件对象
            //         console.log(2798172182789);
            //         console.log(document.querySelectorAll('.lyric-content'));
            //         var inputs = document.querySelectorAll('.lyric-content');
            //         var lyricContent = '';
            //         // lrcfile
            //         for (var i = 0, len = inputs.length; i < len; i++) {
            //             lyricContent += inputs[i].value + '\r\n';
            //         }
            //         console.log(lyricContent);
            //         var blob = new Blob([lyricContent], { type: 'text/plain' });
            //         var file = new File([blob], '文件名', { type: 'text/plain' });
            //         console.log(blob, file);
            //         this.lrcfile = file;
            //     }
            // });

            this.$confirm(
                `<span class='copyTextarea' style='cursor: pointer; color: #00f;' >复制</span><div style='overflow : auto;  height: 500px; margin-top: 5px;'>` +
                    this.lyricString +
                    `</div>`,
                `歌曲名：${this.form.importName} 歌手名: ${this.form.actors.importName}`,
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    dangerouslyUseHTMLString: true,
                    distinguishCancelAndClose: true,
                    closeOnClickModal: false,
                    customClass: 'lyric-toast'
                    // type: 'warning'
                }
            )
                .then(() => {
                    console.log('点击了确定');
                    // console.log(document.querySelectorAll('.lyric-content'));
                    // var inputs = document.querySelectorAll('.lyric-content');
                    // var lyricContent = '';
                    // lrcfile
                    // for (var i = 0, len = inputs.length; i < len; i++) {
                    //     lyricContent += inputs[i].value + '\r\n';
                    // }

                    var textarea = document.querySelector('.lyric-content');
                    console.dir(textarea.value);
                    // var lyricContent = '';
                    // console.log(lyricContent);
                    var blob = new Blob([textarea.value], { type: 'text/plain' });
                    var file = new File([blob], '文件名.lrc', { type: 'text/plain' });
                    console.log(blob, file);
                    this.lrcfile = file;
                })
                .catch(() => {
                    console.log('点击取消');
                });
            this.$nextTick(() => {
                // console.log(document.querySelector('.copyTextarea'));
                var span = document.querySelector('.copyTextarea');
                span.onclick = () => {
                    var textarea = document.querySelector('.lyric-content');
                    textarea.select(); // 选择对象
                    document.execCommand('Copy'); // 执行浏览器复制命令
                    console.log('已复制好，可贴粘。');
                    this.$message.success({
                        message: '已复制好，可贴粘。',
                        duration: 1500
                    });
                };
            });
        },

        togglePlaying(e, row) {
            console.log(row);
            console.dir(this.$refs.audio_1.paused);
            var audio = this.$refs.audio_1;
            if (this.$refs.audio_1.paused) {
                // 暂停变播放
                // audio.play();
                if (Hls.isSupported()) {
                    var hls = new Hls();
                    var _this = this;
                    hls.attachMedia(this.$refs.audio_1);
                    hls.on(Hls.Events.MEDIA_ATTACHED, function() {
                        console.log(_this.form.m3u8Path);
                        hls.loadSource(_this.form.m3u8Path);
                        hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                            // if (_this.playing) {
                            //     _this.$refs.audio_1.play();
                            // }

                            _this.$refs.audio_1.play();
                        });
                    });
                }
                row.preview = '3';
            } else {
                // 播放变暂停
                row.preview = '1';
                audio.pause();
            }
            this.tableData_1 = [...this.tableData_1];
        },
        formatLyric(str) {
            // 去除歌词开头时间
            // console.log(str);
            // // console.log(Base64.decode(str));
            // // new Lyric(Base64.decode(str));
            // console.log(new Lyric(str));
            // str = new Lyric(str).lines.map(item => item.txt + '\r\n').join('');
            // console.log(str);
            // // var lyricArr = str.split(/[(\r\n)\r\n]+/);
            console.log(str);
            if (!str) {
                return '';
            }
            var lyricArr = str.split(/[\r\n\r\n]+/);
            console.log(lyricArr);
            lyricArr.forEach((item, index) => {
                if (!item) {
                    lyricArr.splice(index, 1); //删除空项
                }
            });
            return lyricArr;
        },
        uploadFile(e, row) {
            var event = e || window.event;
            var target = event.target || e.srcElement;
            console.dir(target);
            console.log(e, row);

            if (row.type == 'FLAC-1000K-FTD') {
                // 上传mp3
                // this.upload('/song/uploadSongFile', 'songfile', target.files[0]);

                this.songfile = target.files[0];
                if (this.songfile + '' === '[object File]') {
                    this.$message.success({
                        message: '上传成功',
                        duration: 1500
                    });
                } else {
                    this.$message.error({
                        message: '上传失败',
                        error: 1500
                    });
                }
            } else {
                // 上传歌词文件
                var lyricFileUrl = this.$getObjectURL(target.files[0]);
                console.log('歌词', lyricFileUrl);
                var lyricContent = this.$getFileContent(lyricFileUrl);
                // console.log(lyricContent);
                // lyricContent = this.formatLyric(lyricContent)
                // console.log(lyricContent);
                var lyricArr = this.formatLyric(lyricContent);
                this.lyricString = '';
                var str = '';
                var textarea = document.createElement('textarea');
                for (var i = 0; i < lyricArr.length; i++) {
                    // var p = document.createElement('p');
                    // 方式1
                    // p.innerText = lyricArr[i];
                    // 方式2
                    // p.innerHTML = `<input class='lyric-content' style='outline: none; width: 100%; height: 24px; border: none;' value='${lyricArr[i]}' />`;
                    // p.style.cssText = 'margin:0; padding:0; text-align: left;';
                    // this.lyricString += this.domToString(p);
                    // 方式3
                    str += lyricArr[i] + '\r\n';
                }
                textarea.rows = lyricArr.length;
                textarea.style.cssText = `width: 100%; height: 100%; outline: none; border: none; color: #333;`;
                textarea.innerHTML = str;
                this.lyricString = this.domToString(textarea);

                this.lrcfile = target.files[0];
                if (this.lrcfile + '' === '[object File]') {
                    this.$message.success({
                        message: '上传成功',
                        duration: 1500
                    });
                } else {
                    this.$message.error({
                        message: '上传失败',
                        error: 1500
                    });
                }
                // this.upload('/song/uploadLrcfile', 'lrcfile', target.files[0]);
            }

            // target.value = null;
        },
        domToString(domObj) {
            console.log(domObj);
            if (!document.HTMLDOMtoString) {
                document.HTMLDOMtoString = function(domObj) {
                    let div = document.createElement('div');
                    div.appendChild(domObj);
                    return div.innerHTML;
                };
                return document.HTMLDOMtoString(domObj);
            }

            return document.HTMLDOMtoString(domObj);
        },
        // async upload(url, fileName, fileObj) {
        //     try {
        //         var formdata = new FormData();
        //         formdata.append(fileName, fileObj);
        //         formdata.append('id', this.$route.query.id);
        //         let { data: res } = await this.$http[0].post(url, formdata, {
        //             headers: {
        //                 'Content-Type': 'multipart/form-data',
        //                 name: localStorage.getItem('ms_username')
        //             }
        //         });
        //         if (res.code != '0000') {
        //             throw new Error(res.message);
        //         }
        //         this.$message.success({
        //             message: res.message,
        //             duration: 1500
        //         });
        //         console.log(res);
        //     } catch (err) {
        //         console.dir(err);
        //     }
        // },
        handleSave() {
            this.$confirm('确定要提交吗？', '提示', {
                type: 'warning'
            })
                .then(() => {
                    // this.$handleUnlock.call(this, this.save, '/song/unlock', this.form.id);
                    this.save();
                })
                .catch(() => {});
        },

        async save() {
            try {
                this.form.releaseDate = this.$standardDateToTimstamp(this.form.releaseDate);

                if (this.form.genre && this.form.genre.length && this.form.genre.length > 0) {
                    if (typeof this.form.genre == 'object') {
                        this.form.genre = this.form.genre.join(',');
                    }
                }

                if (this.form.payModeStartEndDate && this.form.payModeStartEndDate.length && this.form.payModeStartEndDate.length > 0) {
                    this.form.payModeStartEndDate[0] = this.$standardDateToTimstamp(this.form.payModeStartEndDate[0]);
                    this.form.payModeStartEndDate[1] = this.$standardDateToTimstamp(this.form.payModeStartEndDate[1]);
                }

                // let url = '/song/update';
                let url = '/song/songcache';
                var params = this.$removeField({
                    id: this.form.id,
                    name: this.form.name,
                    namePinyinFull: this.form.namePinyinFull,
                    albumSeq: this.form.albumSeq,
                    cppartnerId: this.form.cppartnerId,
                    episodeType: this.form.episodeType,
                    releaseUnit: this.form.releaseUnit,
                    status: this.form.status,
                    blackFlag: this.form.blackFlag,
                    listerStart: this.form.auditionStart,
                    listerEnd: this.form.auditionEnd,
                    albumId: this.form.tblAlbum.id,
                    language: this.form.language,
                    genre: this.form.genre,
                    aliasName: this.form.aliasName,
                    subtitle: this.form.subtitle,
                    composer: this.form.composer,
                    lyricWriter: this.form.lyricWriter,
                    excellentFlag: this.form.excellentFlag,
                    accompanyFlag: this.form.accompanyFlag,
                    songfile: this.songfile,
                    lrcfile: this.lrcfile,

                    // remark: this.form.remark
                    relaIds:
                        this.getAllSongID(this.form.relaResultForms, 'songId').length > 0
                            ? this.getAllSongID(this.form.relaResultForms, 'songId')
                            : '',
                    relaTypes:
                        this.getAllSongID(this.form.relaResultForms, 'relaType').length > 0
                            ? this.getAllSongID(this.form.relaResultForms, 'relaType').map(v => {
                                  if (v === 'HasArtistFromEnsemble') {
                                      return 1;
                                  } else if (v === 'HasArtistFromSameEnsemble') {
                                      return 2;
                                  } else if (v === 'HasEnsembleWithArtist') {
                                      return 3;
                                  } else if (v === 'HasSameArtist') {
                                      return 4;
                                  } else if (v === 'HasSameRecordingProject') {
                                      return 5;
                                  } else if (v === 'HasSimilarContent') {
                                      return 6;
                                  } else if (v === 'IsEquivalentToAudio') {
                                      return 7;
                                  } else if (v === 'IsEquivalentToVideo') {
                                      return 8;
                                  } else if (v === 'IsExtendedFromAlbum') {
                                      return 9;
                                  } else if (v === 'IsFromAudio') {
                                      return 10;
                                  } else if (v === 'IsFromVideo') {
                                      return 11;
                                  } else if (v === 'IsParentRelease') {
                                      return 12;
                                  } else if (v === 'IsReleaseFromRelease') {
                                      return 13;
                                  } else if (v === 'IsShortenedFromAlbum') {
                                      return 14;
                                  }
                              })
                            : ''
                });
                var formdata = new FormData();
                for (var key in params) {
                    formdata.append(key, params[key]);
                }

                let { data: res } = await this.$http[0].post(url, formdata, {
                    headers: {
                        // 'Content-Type': 'application/json',
                        'Content-Type': 'multipart/form-data',
                        name: localStorage.getItem('ms_username')
                    }
                });

                this.$message.success({
                    message: res.message,
                    duration: 1500
                });
                this.$closeActiveTag.call(this);
                this.SET_QUKUSONG_DATA([]);
                this.$router.replace({
                    path: '/song/admin'
                });

                this.$refs['target'].value = null;
            } catch (err) {
                console.dir(err);
                this.$message.error({
                    message: err.message,
                    duration: 1500
                });
            }
        },
        // async handleUnlock(callback) {
        //     try {
        //         let url = '/song/unlock';
        //         let { data: res } = await this.$http[0].get(url, {
        //             params: {
        //                 id: this.form.id
        //             }
        //         });
        //         if (res.code != '0000') {
        //             throw new Error(res.message);
        //         }
        //         callback && callback();
        //     } catch (err) {
        //         console.dir(err);
        //         this.$message.error({
        //             message: err.message,
        //             duration: 1500
        //         });
        //     }
        // },
        cancel() {
            this.$closeActiveTag.call(this);
            this.$router.replace({
                path: '/song/admin'
            });
        },
        handleCancel() {
            this.$handleUnlock.call(this, this.cancel, '/song/unlock', this.form.id);
            // this.display('none');
        }
    },
    data() {
        return {
            query: {
                ids: '',
                actorImportName: '',
                albumImportName: '',
                importName: '',
                pageIndex: 1,
                pageSize: 10
            },

            query_3: {
                ids: '',
                pageIndex: 1,
                pageSize: 10
            },
            tableData_3: [],
            // pageTotal_3: 0,
            bindIdVisible: false,
            disabled: false,

            pageTotal: 0,

            mvVisible: false,
            otherLangVisible: false,
            accept: '.lrc',
            legals: [false],
            baseUrl: process.env.VUE_APP_SRC1,
            lyricString: '',
            genres_3,
            languages,
            tableData_2: [],
            tableData_1: [
                {
                    type: 'LRC-LRC',
                    describe: '动态歌词',
                    preview: '0',
                    url: ''
                },
                {
                    type: 'LRC-LRC-TRANS',
                    describe: '翻译歌词',
                    preview: '0',
                    url: ''
                },
                // {
                //     type: 'LRC-TRC',
                //     describe: '天天动听',
                //     preview: '2',
                //     url: ''
                // },
                // {
                //     type: 'LRC-KRC',
                //     describe: '酷狗歌词',
                //     preview: '2',
                //     url: ''
                // },
                // {
                //     type: 'LRC-QRC',
                //     describe: 'Q音歌词',
                //     preview: '2',
                //     url: ''
                // },
                {
                    type: 'LRC-TXT',
                    describe: '文本格式',
                    preview: '0',
                    url: ''
                },
                {
                    type: 'FLAC-1000K-FTD',
                    describe: '无损品质',
                    preview: '1',
                    url: ''
                }
            ],
            rules: {
                name: [{ required: true, message: '请填写歌曲名', trigger: 'blur' }],
                actors: [{ required: true, message: '请填写歌手名', trigger: 'blur' }],
                tblAlbum: [{ required: true, message: '请填写专辑名', trigger: 'blur' }],
                albumSeq: [{ required: true, message: '请填写排序', trigger: 'blur' }],
                tblCppartner: [{ required: true, message: '请填写CP名称', trigger: 'blur' }],
                language: [{ required: true, message: '请选择语言', trigger: 'change' }],
                genre: [{ required: true, message: '请选择风格', trigger: 'change' }],
                releaseDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
                payModeStartEndDate: [{ required: true, message: '请选择起止日期', trigger: 'change' }]
            },
            // form: {
            // id: '',
            // name: '',
            // namePinyinFull: '',
            // namePinyinShort: '',
            // actors: [],
            // tblAlbum: {
            //     name: ''
            // },
            // albumSeq: '',
            // tblCppartner: {
            //     name: ''
            // },
            // cppartnerId: '',
            // language: '',
            // genre: [],
            // externalId: '',
            // price: '',
            // blackFlag: '',
            // aliasName: '',
            // subtitle: '',
            // lyricWriter: '',
            // composer: '',
            // episodeType: 0,
            // accompanyFlag: false,
            // excellentFlag: false,
            // grade: '',
            // releaseUnit: '',
            // releaseDate: '',
            // status: 1,
            // payModeStartEndDate: [],
            // contentId: '678987',
            // auditionStart: '0',
            // auditionEnd: 6000,
            // terminalType: ['0'],
            // albumPicture: {},
            // tblLyrics: [],
            // tblSongfiles: {},
            // isrc: ''
            // },
            songfile: null,
            lrcfile: null
        };
    },
    destroyed() {
        if (!this.tagsList.some(item => item.name === 'SongInfo')) {
            localStorage.removeItem('id_song');
            localStorage.removeItem('indexFlag_song');
            this.$storage.remove('operate');
        } else {
            //  什么都不做
        }
    }
};
</script>

<style lang="scss">
#songInfo_2 {
    .icon-qita {
        font-size: 18px;
        cursor: pointer;
    }
    .limiter * {
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    /*==================================================================
[ 表格宽度 ]*/
    .limiter {
        ::-webkit-scrollbar {
            display: none;
        }

        // 　　width: 80%;
        margin: 10px auto 0;
        /*---------------------------------------------*/

        .container-table {
            width: 100%;
            background: #fff;
            // padding: 0px 30px;
        }

        .wrap-table {
            width: 100%;
        }

        .data-table {
            background-color: #fff;
        }

        table {
            width: 100%;
            border-collapse: collapse;
        }

        th {
            text-align: center;
            font-weight: bold;
            border: 1px solid gray;
        }

        td {
            font-weight: unset;
            text-align: center;
            border: 1px solid gray;
        }

        /*==================================================================
[ 单元格宽度 ]*/
        .column1 {
            width: 20%;
        }

        .column2 {
            // width: 60%;
            width: auto;
        }

        .column3 {
            width: 40%;
        }

        // .column4 {
        //     width: 19%;
        // }

        // .column5 {
        //     width: 13%;
        // }
        /*---------------------------------------------*/

        .table-head th {
            padding-top: 10px;
            padding-bottom: 10px;
        }

        .table-body td {
            height: 46px;
        }

        /*==================================================================
[ Fix header ]*/
        .data-table {
            position: relative;
            padding-top: 46px;
        }

        .table-head {
            position: absolute;
            width: 100%;
            top: 0;
            left: 0;
        }

        .table-body {
            max-height: 231px;
            overflow: auto;
            width: 100%;
        }

        /*==================================================================
[ Ver1 ]*/

        .data-table.ver1 th {
            font-family: Lato-Bold;
            font-size: 18px;
            color: #333;
            background-color: #e5e5e5;
        }

        .data-table.ver1 td {
            font-family: Lato-Regular;
            font-size: 14px;
            color: #808080;
        }
    }

    // =========================================================
    .el-pagination .el-pager li {
        min-width: 0px;
    }
    .el-pagination__jump {
        margin-left: 0px;
    }
    .el-pagination__sizes {
        margin: 0;
    }
    .el-pagination__total {
        margin-right: 0;
    }
    .el-pagination {
        text-align: left;
    }
    // =========================================================
    .lyric-toast {
        width: 500px !important;
    }
    ::-webkit-scrollbar {
        width: 6px;
    }

    ::-webkit-scrollbar-thumb {
        background: rgba(20, 20, 20, 0.2);
        border-radius: 3px;
    }

    ::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-header {
        .cell {
            white-space: nowrap !important;
        }
    }
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 185px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }

    .red {
        color: #ff0000;
    }
    .mr10 {
        margin-right: 10px;
    }
    .table-td-thumb {
        display: block;
        margin: auto;
        width: 40px;
        height: 40px;
    }
    .w {
        // width: 470px !important;
        width: 100% !important;
    }

    .wrapper {
        display: grid;
        grid-template-columns: 50% 50%;
        justify-content: center;
        justify-items: center;
        grid-auto-flow: row;
        align-items: flex-start;
        align-content: flex-start;
        .wrapper-left {
            width: 100%;
            padding-right: 50px;
            .el-form-item {
                .el-form-item__label-wrap {
                    margin-left: 0px !important;
                    width: 120px;
                    text-align: right;
                }
                .el-form-item__content {
                    margin-left: 120px !important;
                }
            }
        }
        .wrapper-right {
            width: 100%;
            .el-form-item {
                &:first-of-type {
                    .el-form-item__content {
                        // display: flex;
                        // flex-direction: row;
                        // align-items: center;
                        // margin-left: 0 !important;
                    }
                }
            }
        }
    }

    .table {
        width: 100%;
        font-size: 14px;
        text-align: center;
        margin-bottom: 20px;
        display: flex;
        justify-content: space-between;
        .left {
            width: 49%;
        }
        .right {
            width: 49%;
        }
        .el-table {
            display: inline-block;
            width: 100%;
            .u1048_icon {
                width: 18px;
                height: 18px;
            }
            .play_icon,
            .pause_icon {
                // width: 43px;
                width: 18px;
                height: 18px;
            }
            // .u1049_icon {
            //     width: 22px;
            //     // height: 9px;
            //     // height: 100%;
            // }
            .btn {
                position: relative;
                display: inline-block;
                text-align: center;
                color: #fff;
                text-decoration: none;
                width: 80px;
                // height: 32px;
                // line-height: 32px;
                background: #409eff;
                border-radius: 3px;
                font-size: 12px;
                vertical-align: middle;
                margin-left: 10px;
                input[name='file'] {
                    opacity: 0;
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    left: 0;
                }
            }
        }
    }
    .el-row {
        // padding-left: 10%;
        text-align: right;
    }
}
</style>
